<template>
  <div class="about">
    <h1>This is an about page</h1>
    <br />
    <div>{{ $l('LongWelcomeMessage') }}</div>
    <MenuView></MenuView>
    <BreadcrumbView></BreadcrumbView>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useMenuStore } from '@/stores/menuStore'
import MenuView from './layout/MenuView.vue'
import BreadcrumbView from './layout/BreadcrumbView.vue'
import { useBreadcrumbStore } from '@/stores/breadcrumbStore'
export default defineComponent({
  name: 'AboutVue',
  components: { MenuView, BreadcrumbView },
  created() {
    if (useBreadcrumbStore().items.length == 0) {
      useBreadcrumbStore().pushItem({
        name: '菜单1',
        url: '',
      })

      useBreadcrumbStore().pushItem({
        name: '菜单1_1',
        url: '',
      })
    }
  },
})
</script>

<style>
@media (min-width: 1024px) {
  .about {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
}
</style>
